<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Sticky Navigation</title>
</head>

<body>
  <!-- 1. HTML模板代码： -->
  <nav class="nav">
    <div class="container">
      <h1 class="logo"><a href="/index.html">My Website</a></h1>

      <!-- 1.2 一看到 <导航栏> 出现多个文字排版, 立马想到是 ul+li 进行包裹的： -->
      <ul>
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

  <div class="hero">
    <div class="container">
      <h1>Welcome To My Website</h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p>
    </div>
  </div>

  <section class="container content">
    <h2>Content One</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut
      cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia
      aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error
      reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum
      voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat
      officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi?
      Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</p>

    <h3>Content Two</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi
      laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident, voluptates
      illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est! Tenetur tempora
      doloremque quae iste aperiam hic cumque repellat?</p>
  </section>

  <script src="script.js"></script>
</body>

</html>